/* 全局的变量 */
// 当前图片的索引，正在隐藏的图片索引
let index = 0
// 当前变化的不透明度，是百分比的分子
let opacityValue = 100
// 轮播图片的集合
let imgList
// 轮播图片的张数
let count = 0
// 小圆点的集合
let icoList
// 图片在改变不透明度过程中的间隔时间
// 总共是变换100次不透明度，时间间隔应该是总时间 / 100
const next_time = 10
// 整张图片在轮播过程中的停顿时间
const stop_time = 5000
// 延迟定时器的id
let timeoutId
// 延迟的时间，这里可能是next_time/stop_time
let time

/**
 * 初始化banner
 */
function initBanner() {
    imgList = document.querySelectorAll('.banner-box>.banner-img>img')
    icoList = document.querySelectorAll('.banner-box>.banner-ico>li')
    count = imgList.length
    initChangeBtn()
    initHover()
    transform()
}

/**
 * 改变一次不透明度
 * 可以考虑使用setInterval()
 */
function transform() {
    // 当前图片
    let current = imgList[index]
    // 下一张图片
    let next
    if (index < count - 1) {
        next = imgList[index + 1]
    } else {
        // 如果当前是最后一张图片，它的下一张应该是第一张图片
        next = imgList[0]
    }
    // 修改不透明度
    current.style.opacity = String(opacityValue / 100)
    next.style.opacity = String(1 - opacityValue / 100)
    // 不透明度降低1%
    opacityValue -= 1 // -1
    if (opacityValue < 0) {
        opacityValue = 100
        index ++
        if (index > count - 1) {
            index = 0
        }
    }
    // 切换小圆点必须放在index的变化之后
    changeIco()
    time = opacityValue === 100 ? stop_time : next_time
    // 延迟递归调用，10是下一次变换的间隔时间
    timeoutId = setTimeout(transform, time)
}

/**
 * 切换小圆点
 */
function changeIco() {
    // 先把所有的小圆点样式还原
    for (let i = 0; i < count; i ++) {
        icoList[i].style.backgroundColor = 'rgba(0, 0, 0, .4)'
        icoList[i].style.borderColor = 'hsla(0, 0%, 100%, .4)'
    }
    // 把当前索引对应的小圆点样式改变
    icoList[index].style.backgroundColor = 'hsla(0, 0%, 100%, .4)'
    icoList[index].style.borderColor = 'rgba(0, 0, 0, .4)'
}

/**
 * 切换整张图片
 */
function changeImg() {
    // 先把所有的图片还原成全透明（隐藏）
    for (let i = 0; i < count; i ++) {
        imgList[i].style.opacity = '0'
    }
    // 把当前索引对应的图片变成全透明（显示）
    imgList[index].style.opacity = '1'
    changeIco()
}

/**
 * 为上一张、下一张、小圆点按钮设置点击事件
 */
function initChangeBtn() {
    // 上一张
    const prevBtn = document.querySelector('.banner-box>.banner-prev')
    // 再点击按钮，触发事件的时候，有可能是2张图片在切换过程，也有可能是整张停顿的时候
    prevBtn.addEventListener('click', function() {
        // 不透明度变化重新开始
        opacityValue = 100
        if (index > 0) {
            // 索引减小一个
            index --
        } else {
            // 如果当前是第一张，它的前一张应该最后一张
            index = count - 1
        }
        // 切换图片
        changeImg()
    })
    // 下一张
    const nextBtn = document.querySelector('.banner-box>.banner-next')
    nextBtn.addEventListener('click', function() {
        // 不透明度变化重新开始
        opacityValue = 100
        if (index < count - 1) {
            // 索引增加一个
            index ++
        } else {
            // 如果当前是最后一张，它的下一张应该是第一张
            index = 0
        }
        // 切换图片
        changeImg()
    })
    // 所有的小圆点
    for (let i = 0; i < count; i ++) {
        icoList[i].addEventListener('click', function() {
            // 修改index
            index = i
            // 切换图片
            changeImg()
        })
    }
}

/**
 * 为轮播图区域设置鼠标移入/移出的事件
 * 移入的时候暂停轮播，移出的时候重新开始
 */
function initHover() {
    // 侧边栏不能触发鼠标事件，定义的事件的元素不能是侧边栏的父元素
    const banner = document.querySelector('.banner-box>.banner-img')
    // 鼠标移入
    banner.addEventListener('mouseover', function() {
        clearTimeout(timeoutId)
    })
    // 鼠标移出
    banner.addEventListener('mouseout', function() {
        timeoutId = setTimeout(transform, time)
    })
}